<template>
  <view class="page-content">
    <view class="header">
      <view class="flex-col group_4">
        <view class="flex-col" style="margin-bottom: 16rpx">
          <view class="flex-row items-center mt-17">
            <view class="section_2"></view>
            <text class="font_2 ml-9">{{ detailInfo.address }}</text>
          </view>
        </view>
        <view class="price">
          <text class="text_3">￥</text>
          <text class="text_2">{{ detailInfo.price }}</text>
          <text>/小时</text>
        </view>
        <view class="mt-12 flex-row justify-between items-center">
          <view class="flex-row items-center">
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_5"
                src="/static/index/location2.png"
              />
              <text class="ml-4 font_3 text_3">{{ item.distance }}km</text>
            </view>
            <view class="ml-16 flex-row items-center">
              <image class="shrink-0 image_4" src="/static/index/animal.png" />
              <text class="ml-4 font_3 text_4">1只</text>
            </view>
          </view>
          <view class="flex-row">
            <view class="ml-22 flex-row items-center">
              <image
                class="shrink-0 image_7"
                src="/static/index/time-light.png"
              />
              <text class="font_4 ml-7">{{ detailInfo.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="common-box">
      <form-item-title text="宠物详情"></form-item-title>
      <u-grid :col="3" :border="false">
        <u-grid-item v-for="item in detailInfo.photoImag" :key="item">
          <view class="grid-image">
            <image :src="item"></image>
          </view>
        </u-grid-item>
      </u-grid>
      <view class="grid">
        <view class="flex-col items-start grid-item">
          <text class="font_3">宠物名</text>
          <text class="font_5 mt-11">{{ detailInfo.petName }}</text>
        </view>
        <view class="flex-col items-start grid-item">
          <text class="font_3">品种</text>
          <text class="font_5 mt-11">{{ detailInfo.breed }}</text>
        </view>
        <view class="flex-col items-start grid-item">
          <text class="font_3">疫苗接种信息</text>
          <text class="mt-10 font_5">{{
            detailInfo.ifVaccination ? '是' : '否'
          }}</text>
        </view>
        <view class="flex-col items-start grid-item">
          <text class="font_3">宠物年龄</text>
          <text class="mt-10 font_5">{{ detailInfo.age }}</text>
        </view>
      </view>
    </view>
    <view class="common-box">
      <form-item-title text="备注"></form-item-title>
      <view class="beizhu-msg">
        {{ detailInfo.remark ? detailInfo.remark : '' }}
      </view>
    </view>
    <view class="common-box">
      <form-item-title text="宠物位置"></form-item-title>
      <map
        style="
          width: 100%;
          height: 320rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          margin-top: 28rpx;
        "
        :latitude="detailInfo.lng"
        :longitude="detailInfo.lat"
      >
      </map>
    </view>
    <view class="bottom-box">
      <view class="form-box">
        <view class="flex-row justify-between items-center group_16">
          <view class="flex-col button_3">
            <text class="self-start font_3 text_28">帮遛预算</text>
            <view class="flex-row items-center self-stretch section_11 mt-7">
              <text class="text_30">{{ detailInfo.price }}</text>
              <text>/小时</text>
            </view>
          </view>
          <view class="chat-btn"> 聊一聊 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import formItemTitle from 'components/index/form-item-title.vue'
import customTag from 'components/common/custom-tag.vue'
export default {
  data() {
    return {
      detailInfo: null,
    }
  },
  components: {
    formItemTitle,
    customTag,
  },
  onLoad(option) {
    this.detailInfo = JSON.parse(option.item)
    if (this.detailInfo.photo) {
      this.detailInfo.photoImag = this.detailInfo.photo.split(',')
    }
    console.log(this.detailInfo.photoImag)
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  background-color: #ffffff;
  height: 100%;
  overflow: auto;

  .header {
    .mt-17 {
      margin-top: 34rpx;
    }

    .ml-7 {
      margin-left: 14rpx;
    }

    .ml-9 {
      margin-left: 18rpx;
    }

    .group_4 {
      padding: 36rpx 32rpx 48rpx;
      border-bottom: solid 2rpx #f6f6f6;

      .price {
        .text_3 {
          color: #ff7676;
          font-size: 24rpx;
          font-family: D-DIN;
          line-height: 17.72rpx;
        }

        .text_2 {
          color: #ff7676;
          font-size: 48rpx;
          font-family: D-DIN;
          line-height: 34.18rpx;
        }
      }

      .group_5 {
        border-radius: 50%;
        width: 24rpx;
        height: 24rpx;
        border-left: solid 2rpx #999999;
        border-right: solid 2rpx #999999;
        border-top: solid 2rpx #999999;
        border-bottom: solid 2rpx #999999;
      }

      .font_2 {
        font-size: 40rpx;
        font-family: PingFang SC;
        line-height: 37.56rpx;
        font-weight: 700;
        color: #333333;
      }

      .text_2 {
        line-height: 37.52rpx;
      }

      .section_2 {
        background-color: #fcd610;
        border-radius: 50%;
        width: 24rpx;
        height: 24rpx;
      }

      .image_5 {
        width: 33.58rpx;
        height: 30.42rpx;
      }

      .font_3 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 20.78rpx;
        color: #999999;
      }

      .text_3 {
        line-height: 17.8rpx;
      }

      .image_4 {
        width: 33.58rpx;
        height: 30.42rpx;
      }

      .text_4 {
        line-height: 20.76rpx;
      }

      .image_6 {
        width: 28rpx;
        height: 28rpx;
      }

      .font_4 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 20.78rpx;
        font-weight: 700;
        color: #000000;
      }

      .image_7 {
        border-radius: 50%;
        width: 28rpx;
        height: 28rpx;
      }
    }
  }

  .common-box {
    padding: 32rpx 38rpx;
    border-bottom: solid 2rpx #f6f6f6;

    .mt-11 {
      margin-top: 22rpx;
    }

    .grid-image {
      width: 168rpx;
      height: 166rpx;
      border-radius: 16rpx;

      > image {
        width: 168rpx;
        height: 166rpx;
        border-radius: 16rpx;
      }
    }

    .grid {
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 0;
      column-gap: 99.96rpx;

      .grid-item {
        padding: 28rpx 0rpx;

        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22rpx;
          color: #999999;
        }

        .font_5 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.34rpx;
          font-weight: 700;
          color: #000000;
        }
      }
    }

    .map-box {
      height: 312rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      background-color: #000;
    }
  }

  .bottom-box {
    padding: 16rpx 0;
    background: #ffffff;
    box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    .chat-btn {
      width: 466rpx;
      height: 96rpx;
      background: #fcd610;
      border-radius: 48rpx 48rpx 48rpx 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
    }
    .mt-7 {
      margin-top: 14rpx;
    }

    .group_16 {
      padding-left: 36rpx;
      padding-right: 28rpx;

      .button_3 {
        width: max-content;

        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.4rpx;
          font-weight: 700;
          color: #666666;
        }

        .text_28 {
          color: #000000;
        }

        .section_11 {
          .text_31 {
            color: #000000;
            font-size: 24rpx;
            line-height: 17.72rpx;
          }

          .text_30 {
            color: #ff7676;
            font-size: 40rpx;
            line-height: 28.48rpx;
          }
        }
      }

      .button_4 {
        padding: 28rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        width: 318rpx;
        height: 84rpx;

        .font {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 30.02rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_29 {
          line-height: 29.88rpx;
        }
      }
    }
  }
}
</style>